<!--  -->
<template>
  <div class="task-container flex-column flex-sub">
    <!-- 添加按钮 -->
    <div class="flex-row justify-between align-center">
      <!-- 添加按钮 -->
      <custom-button @click="handleAdd" />

      <div>
        <el-input
          v-model="queryInfo.keyword"
          placeholder="请输入搜索条件"
          @keyup.enter.native="getTagPageList"
        >
          <!-- <el-button slot="append" type="default" icon="el-icon-search"></el-button> -->
          <i class="el-icon-search el-input__icon" slot="suffix" @click.stop="getTagPageList"></i>
        </el-input>
      </div>
    </div>

    <div class="flex-sub table-container">
      <el-table
        v-loading="loading"
        :data="tableData"
        height="98%"
        header-cell-class-name="table-header-cell"
        header-row-class-name="table-header-row"
      >
        <el-table-column prop="name" label="任务类型" />
        <!-- <el-table-column prop="personName" label="任务数量" /> -->

        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          :width="handleScreenWidthToVw(185)+ 'px'"
          align="right"
        >
          <template slot-scope="scope">
            <div class="flex-row">
              <div class="btn-edit" @click="handleNavDetail(scope.row)">任务列表</div>
              <div class="pd-lr-10 fz-14" style="color: #333;">|</div>
              <div class="btn-edit" @click="handleClick(scope.row)">修改</div>
              <div class="pd-lr-10 fz-14" style="color: #333;">|</div>
              <div class="btn-delete" @click="handleDelete(scope.row.id)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- table -->

    <!-- 分页 -->
    <el-pagination
      hide-on-single-page
      background
      layout="prev, pager, next, total, jumper"
      :total="total"
      :page-size="queryInfo.pageSize"
    />
    <edit-dialog
      ref="editDialog"
      :init-data="initData"
      :is-show="isShowEdit"
      @close="handleCloseEdit"
      @submit="handleSubmit"
    />
  </div>
</template>

<script>
// import { apiGetCarPageList, apiAddCarInfo, apiEditCarInfo, apiDeleteCarInfo } from './api.js'
import { apiAddTag, apiUpdateTag, apiDeleteTag, apiGetTag } from './api'
import dayjs from 'dayjs'
import EditDialog from './components/edit-dialog'
import { handleScreenWidthToVw } from '@/utils/tools'

export default {
  components: { EditDialog },

  filters: {
    dateFormat(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    expireDateFormat(value) {
      if (!value) return '已过期'
      const expireTime = dayjs(value).valueOf()
      const currentTime = dayjs().valueOf()
      const time = expireTime - currentTime
      if (time <= 0) return '已过期'

      return `剩余${dayjs(value).diff(dayjs(), 'day')}天`
    },
  },
  data() {
    return {
      queryInfo: {
        keyword: '',
        pageSize: 10,
        pageNo: 1,
        businessTagEnum: '',
      },
      total: 0,
      tableData: [],
      isShowEdit: false,
      isAdd: false,
      selectId: '',
      initData: {},
      loading: false,
    }
  },

  computed: {
    businessTagEnum() {
      return 'SECURITYTASK'
    },
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
  },

  created() {
    this.queryInfo.businessTagEnum = this.businessTagEnum
    this.getTagPageList()
  },
  methods: {
    handleAdd() {
      this.isAdd = true
      this.isShowEdit = true
      this.initData = { businessTagEnum: this.businessTagEnum }
    },
    async getTagPageList() {
      this.loading = true
      try {
        // TODO 查询接口
        const data = await apiGetTag({ ...this.queryInfo })
        if (!data) return
        this.total = data.total || 0
        this.tableData = data.records || []
      } finally {
        this.loading = false
      }
    },
    handleCloseEdit() {
      this.isShowEdit = false
    },
    async handleSubmit(form) {
      try {
        // TODO 新增修改接口
        this.isAdd ? await apiAddTag(form) : await apiUpdateTag(form)
        this.$message.success(this.isAdd ? '新增成功！' : '修改成功！')
        this.isShowEdit = false
        this.getTagPageList()
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.$refs.editDialog && this.$refs.editDialog.handleCloseLoading()
      }
    },
    handleClick(item) {
      this.isAdd = false
      this.isShowEdit = true
      this.initData = { ...item }
    },
    handleDelete(id) {
      this.$confirm(
        '你确定要删除该任务类型吗？删除后，该类型的所有任务将同步删除 且无法复原。',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async () => {
        try {
          // TODO 删除接口
          await apiDeleteTag(id)
          this.$message.success('删除成功！')
          this.getTagPageList()
        } catch (msg) {
          this.$message.error(msg)
        }
      })
    },
    handleNavDetail(item) {
      this.$router.push(`/schedule/task-setting-detail?id=${item.id}&title=${item.name}`)
    },
  },
}
</script>
<style lang="scss" scoped>
.task-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #fff;
  box-sizing: border-box;
}

.query-container {
  display: flex;
  flex-direction: row;
}

.btn-edit {
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.btn-delete {
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}
</style>
